<template>
  <div class="w-full h-full">
    <div class="top-box">
      <BorderBox11 :title="$t('summary.JC')">
        <div class="w-full card_box">
        <itemBox
          v-for="item in props.detailsJC"
          :key="item.name"
          :item="item"
        />

        </div>
      </BorderBox11>
    </div>
    <div class="center-box">
      <BorderBox11 :title="$t('summary.HL')">
        <div class="w-full card_box">
          <itemBox
          v-for="item in props.detailsHL"
          :key="item.name"
          :item="item"
        />
          <div style="width: 40%"></div>
        </div>
      </BorderBox11>
    </div>
    <div class="bottom-box">
      <BorderBox11 :title="$t('summary.LVT')">
        <div class="w-full card_box">
          <itemBox
          v-for="item in props.detailsLVT"
          :key="item.name"
          :item="item"
        />
        </div>
      </BorderBox11>
    </div>
  </div>
</template>

<script setup>
import itemBox from "./itemBox.vue";
import ItemBox from "@/views/ProductionLineMonitoring/components/itemBox.vue";
import { defineProps } from "vue";
import { BorderBox11 } from "datav-vue3";
//接收组件传值
const props = defineProps({
  detailsLVT: {
    type: Array,
    required: true,
    default: () => {
      return [];
    },
  },
  detailsJC: {
    type: Array,
    required: true,
    default: () => {
      return [];
    },
  },
  detailsHL: {
    type: Array,
    required: true,
    default: () => {
      return [];
    },
  },
});
</script>

<style scoped lang="scss">
.card_title {
  height: 70px;
  width: 326px;
  font-size: 22px;
  font-weight: 700;
  //background: url("../images/titBg.png") no-repeat;
  background: url("../images/link-on.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 70px;
  margin-left: 54px;
}
.card_box {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-content: stretch;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 63px;
  gap: 18px;
}
.top-box{
  height: 63%;
}
.center-box{
  height: 15%;
}
.bottom-box{
  height: 22%;
}
</style>
